import {Card, Flex} from "antd";
import G2_2 from '../components/G2-2.tsx'
import G2_1 from "../components/G2-1.tsx";
import G2_3 from "../components/G2-3.tsx";

const cardStyle =(b)=>{
    return {
        flex: 1,
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
        height:'200px',
        position:'relative',
        backgroundImage: b
    }
}

const SkillTree_html = ()=>{
    return (
        <div>
            <Flex gap={100}>
                <Card style={cardStyle('linear-gradient(to right, #8fd3f4 0%, #84fab0 100%)')}>
                    <div style={{width:'60%'}}>
                        <h1 style={{margin: 0}}>11111</h1>
                        <div>可以简单描述一些 HTML 特性，以及如何使用这些特性。</div>
                    </div>
                    <G2_2/>
                </Card>
                <Card style={cardStyle('linear-gradient(to right, #a6c0fe 0%, #f68084 100%)')}>
                    <div style={{width: '60%'}}>
                        <h1 style={{margin: 0}}>22222</h1>
                        <div>可以简单描述一些 HTML5 特性，以及如何使用这些特性。</div>
                    </div>
                    <G2_1/>
                </Card>
                <Card style={cardStyle('linear-gradient(to right, #fff1eb 0%, #ace0f9 100%)')}>
                    <div style={{width: '60%'}}>
                        <h1 style={{margin: 0}}>33333</h1>
                        <div>可以简单描述一些 HTML 特性，以及如何使用这些特性。</div>
                    </div>
                    <G2_3/>
                </Card>
            </Flex>
        </div>
    )
}

export default SkillTree_html